<template>
    <fieldset>
        <legend>常用api</legend>
        <input ref="ipt" type="text">
        <h1 id="hh">{{name}}</h1>
        <button @click="change">点击修改name属性</button>
        <button @click="handleClick">点击获取焦点</button>
        <Child ref="child" gift="123"></Child>
    </fieldset>
</template>
<script>
    import Child from './Child'
    //$root 获取根实例
    //#parent 获取父实例，支持链式
    //ref 获取引用，作用子啊dom元素上可以获取真实dom 作用在子组件上，可以获取子组件实例的引用
    //$nextTick
    //provide(){return{}}传 inject:['']接收  这对组合用于跨组件传参
    export default {
        data(){
            return{
                name:"李雷"
            }
        },
        inject:['msg'],
        components: {
            Child
        },
        mounted(){
            // console.log(this.$root);
            // console.log(this.$parent.$parent);//可以获得父组件的数据；父传子也可以通过这种方式，但不推荐
        },
        methods: {
            handleClick(){
                console.log(this.$refs.ipt);//ref会注册在$refs这个对象上
                this.$refs.ipt.focus()
                console.log(this.$refs);
                this.$refs.child.msg="被父组件修改了"
                console.log(this.msg);
            },
            change(){
                console.log(document.getElementById('hh').innerText);
                this.name="小红"
                // this.$nextTick(function(){
                //     console.log(document.getElementById('hh').innerText);
                // })
                //nextTick原理之一
                setTimeout(()=>{
                    console.log(document.getElementById('hh').innerText);
                })
                
            }
        }
    }
</script>